<template>
  <div class="mod-config">
    <div v-if="groupVisible">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()" ref="dataForm">
        <el-form-item label="关键字">
          <el-input v-model="dataForm.keyword" placeholder="群库名字关键字"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="dataForm.isActive" placeholder="请选择">
            <el-option
              v-for="item in useroption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;"
      >
        <el-table-column label="名字" prop="name"></el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
        <el-table-column label="公众号" prop="accountResponse.publicAccountNickname"></el-table-column>
        <el-table-column label="创建时间" prop="createdTime">
          <template slot-scope="scope">
            {{formatTime(scope.row.createdTime)}}
          </template>
        </el-table-column>
        <el-table-column label="是否参与资源兑换" prop="isJoinResourceExchange">
          <template slot-scope="scope">
            {{ scope.row.isJoinResourceExchange ? '参与' : '不参与' }}
          </template>
        </el-table-column>
        <el-table-column label="分流" prop="branch"></el-table-column>
        <el-table-column label="状态" prop="branch">
          <template slot-scope="scope">
            {{ scope.row.isActive ? '生效' : '失效' }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookOrCheck(scope.row.id)">活动管理</el-button>
            <el-button type="text" size="small" @click="goGatlin()">群库编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>

    <!--活动列表-->
    <activity-list v-else ref="activityList" @goBack="goBack"></activity-list>
  </div>

</template>

<script>
  import ActivityList from './activityList'
  import moment from 'moment';
  export default {
    data() {
      return {
        groupVisible: true,
        useroption: [
          {
            value: null,
            label: '全部'
          },
          {
            value: true,
            label: '生效'
          },
          {
            value: false,
            label: '失效'
          }
        ],
        dataForm: {
          isActive: null,
          keyword: '',
          isJoinResourceExchange: true
        },
        dataList: [],
        pageIndex: 0,
        pageSize: 20,
        totalPage: 0,
        dataListLoading: false,
        totalStatistic: {}
      }
    },
    activated() {
      this.getDataList()
    },
    components: {
      ActivityList
    },
    methods: {
      search() {
        this.pageIndex = 0
        this.getDataList()
      },
      formatTime(stamp) {
        return stamp ? moment(stamp).format('YYYY-MM-DD HH:mm:ss') : '立即推送';
      },
      // 获取数据列表
      getDataList() {
        let url = ''
        let authorization = 'Bearer H15CbHwhT6pqsoSvPghlOI5ItQdloWOP'
        if (process.env.NODE_MYSELF) {
          url = 'https://component.qingclass.com/admin/api/group_collection'
        } else {
          url = 'https://test-component.qingclass.com/admin/api/group_collection'
        }
        this.dataListLoading = true
        this.dataForm.page = this.pageIndex
        this.dataForm.size = this.pageSize
        this.$http({
          url: url,
          method: 'get',
          headers: {
            'authorization': authorization
          },
          params: this.$http.adornParams(this.dataForm)
        }).then(({ data }) => {
          if (data && data.status === 200) {
            this.dataList = data.data.groupCollectionResponses
            this.totalPage = data.data.page.totalElement
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      lookOrCheck(id) {
        this.groupVisible = false
        this.$nextTick(() => {
          this.$refs.activityList.init(id)
        })
      },
      goBack() {
        this.groupVisible = true
      },
      goGatlin() {
        this.$confirm(`是否跳转至加特林系统进行群库配置?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (process.env.NODE_MYSELF) {
            window.open("https://component.qingclass.com/page/index.html#/group-collection", '_blank')
          } else {
            window.open("https://test-component.qingclass.com/page/index.html#/group-collection", '_blank')
          }
        }).catch(() => {})

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 0
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val - 1
        this.getDataList()
      }
    }
  }
</script>
<style scoped>
  .integral{
    display: flex;
  }
  .integral>div{
    margin: 15px;
  }
</style>
